<template>
	<view class="d-inline-block">
		<button size="mini" class="m-1 button-mini" :style="getStyle"
			:class="bool?'main-bg-color':''">{{item.name}}</button>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "color-tag",
		data() {
			return {

			};
		},
		props: {
			item: {
				type: Object,
			},
			color: {
				type: Boolean
			},
			bool: {
				type: Boolean
			}
		},
		computed: {
			getStyle() {
				if (!this.color) {
					return `border:2rpx solod #ccc;background:#fff;`
				} else {
					let borderColor = ['#EEA6AA', '#DD6A4B', '#98D5D8', '#9DBE93', '#BCCD99'];
					let backGround = ['#F8EAE9', '#FFBEC6', '#E8F6F6', '#E4F5E2', '#F2F6E8'];
					let index = Math.floor(Math.random() * borderColor.length);
					let bordercolor = borderColor[index];
					let backgroundcolor = backGround[index];
					return `border:2rpx solod ${bordercolor};background:${backgroundcolor}`
				}

			}
		}
	}
</script>
<style scoped>
	.button-mini {
		font-size: 24rpx;
	}
</style>